import React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Ionicons from 'react-native-vector-icons/Ionicons';
import DrawHomeScreen from '../DrawScreen/DrawHomeScreen';
import DrawMineScreen from '../DrawScreen/DrawMineScreen';
import DrawComponentsScreen from '../DrawScreen/DrawComponentsScreen';
import DrawApiScreen from '../DrawScreen/DrawApiScreen';
const Tab = createBottomTabNavigator();
const TabRouter = ({ navigation }) => {
	navigation.addListener('beforeRemove', (e) =>{
		e.preventDefault();
	});
	return (
		<Tab.Navigator
    lazy
    screenOptions={({ route }) => ({
				tabBarIcon: ({ focused, color, size }) => {
					let iconName;

					if (route.name === 'com') {
						iconName = focused
							? 'help-buoy'
							: 'help-buoy-outline';
					} else if (route.name === 'home') {
						iconName = focused ? 'home' : 'home-outline';
					} else if (route.name === 'mine') {
						iconName = focused ? 'people-sharp' : 'people-outline';
					}else if (route.name === 'api') {
						iconName = focused ? 'book' : 'book-outline';
					}

					return <Ionicons  color={color}
    name={iconName}
    size={size}
					       />;
				}
			})}
    tabBarOptions={{
				activeTintColor: 'blue',
				inactiveTintColor: 'gray'
			}}
		>
			<Tab.Screen  component={DrawComponentsScreen}
    name="com"
    options={{
				tabBarLabel: '组件'
			}}
			/>
			<Tab.Screen  component={DrawApiScreen}
    name="api"
    options={{
				tabBarLabel: 'api'
			}}
			/>
			<Tab.Screen  component={DrawHomeScreen}
    name="home"
    options={{
				tabBarLabel: '首页'
			}}
			/>
			<Tab.Screen  component={DrawMineScreen}
    name="mine"
    options={{
				tabBarLabel: '我的'
			}}
			/>
		</Tab.Navigator>
	);
};
export default TabRouter;
